<template>
   <div  @click="changShow">
   	<div class='mineHead'>
   		 <img :src="headData.headImg" alt="" class="bgImg"/>
   		 <div class="mineHeadTop">
   		 	<router-link to="mineReset">
   		 		 <img :src="settingImg" alt="" class="settingImg"/>
   		 	</router-link>
   		 	
   		 	 <div class="headerImg">
   		 	 	<img :src="headData.headImg" alt="" />
   		 	 </div>
   		 	 <div class='wangMing'>
   		 	 	<p>
   		 	 		{{headData.username}}
   		 	 		<span v-if="isLogin" class="isLoginClass">
   		 	 			<router-link :to="{name:'login'}">登录</router-link>
   		 	 		</span>
   		 	 	</p>
   		 	 	
		   	    <p>{{headData.id}}</p>
		   	    <p>{{headData.signature}}</p>
   		 	 </div>
	   	     
	   	     <div class="erWeiMa">
	   	     	 <div @click.stop="erweima">
	   	     	 	<img :src="erWeiMaImg" alt="" />
	   	     	 	<p>我的二维码</p>
	   	     	 </div>
	   	     	
	   	     	 <p class="lineP"></p>
	   	     	 <div>
	   	     	 	<router-link :to="{name:'personIndex'}">
	   	     	 		<img :src="editImg" alt="" />
	   	     	 	    <p>编辑资料</p>
	   	     	 	</router-link>
	   	     	 </div>
   	         </div>
   		 </div>
   	     
   	</div>
   	
   	<div class="addImg">
   		<p v-if="pictureShow">照片集空空的，快点儿添加吧^_^</p>
   		<div v-else class="addNewImg" >
   			<div v-for="(item,index) in getImgData" :key="index" class='getData'>
   				<img :src="item.img" alt="" @click="longTouch(index)"/>
   				<img :src="deleteImg" alt="" class="delImg" v-if="deletIndex === index" @click.stop="delImage(index)"/>
   			</div>
   		</div>
   		<img :src="addImg" alt="" @click="changeImg" class="changeImgClass"/>
   		<div v-if="allImg" class="allImgClass" >
   			<div v-for="(item,index) in addImgData" :key="index" @click="addImgTo(index,$event)">
   				<img :src="item.img" alt="" />
   			</div>
   		</div>
   	</div>
    
    <div class='guanYu'>
    	<div>
    		<router-link :to="{name:'guanYu'}">
    			<img :src="guanYuData[0].headImg" alt="" />
	    		<p>{{guanYuData[0].content}}</p>
	    		<img :src="rowImg" alt="" />
    		</router-link>
    	</div>
    	<div>
    		<router-link :to="{name:'suggest'}">
		    	<img :src="guanYuData[1].headImg" alt="" />
	    		<p>{{guanYuData[1].content}}</p>
	    		<img :src="rowImg" alt="" />	
	    	</router-link>
    	</div>
    	<div @click.stop="renZheng">
    		<img :src="guanYuData[2].headImg" alt="" />
    		<p>{{guanYuData[2].content}}</p>
    		<img :src="rowImg" alt="" />
    	</div>
    </div>
    <div v-show="isShow" class='authentication'>
    	<div>
    		<router-link to="renZheng">
    			<div>
	    			<img :src="mingXingImg" alt="" />
	    			<p>明星认证</p>
	    		</div>
    		</router-link>
    		
    		<div>
    			<img :src="guanFangImg" alt="" />
    			<p>制片方认证</p>
    		</div>
    	</div>
    	<div class="deleteClass">
    		   <p >取消</p>
    	</div>
    </div>
     <div v-if="isErWeiMa" class='setErWeiMa'>
	   	<img :src="erWeiMaImg" alt="" />
	 </div>
   <BottomNav />
   </div>
</template>

<script>
	import BottomNav from "../../public/bottomNav"
	export default {
		name:"mineIndex",
		components:{
			BottomNav
		},
		data(){
			return{
				isShow:false,
			    allImg:false,
			    isLogin:true,
				pictureShow:false,
				deletIndex:'',
				isErWeiMa:false,
				xianZhuang:1,
				headData:{
					username:"未登录",
					id:0,
					signature:"亲亲，你还没有登录哦，赶紧去登录吧",
					ouFen:0,
					telephone:0,
					address:"北京 昌平",
					sex:"男",
					headImg:require("../../../assets/images/mine/47/denglu.gif")
				},
				settingImg:require("../../../assets/images/mine/47/profile_set_icon_normal.png"),
				deleteImg:require("../../../assets/images/mine/55/s-1.png"),
				erWeiMaImg:require("../../../assets/images/mine/47/profile_erweima_icon.png"),
				editImg:require("../../../assets/images/mine/47/profile_edit_icon.png"),
				guanFangImg:require("../../../assets/images/mine/48/guanFang.png"),
				mingXingImg:require("../../../assets/images/mine/48/mingXing.png"),
				addImg:require("../../../assets/images/mine/47/profile_photo_add_normal.png"),
				rowImg:require("../../../assets/images/mine/47/rightRow.png"),
				guanYuData:[
				  {
				  	headImg:require("../../../assets/images/mine/47/profile_about_icon.png"),
				  	content:"关于偶粉"
				  },
				  {
				  	headImg:require("../../../assets/images/mine/47/profile_feedback_icon.png"),
				  	content:"意见反馈"
				  },
				  {
				  	headImg:require("../../../assets/images/mine/47/profile_cerify_icon.png"),
				  	content:"我要认证"
				  }
				],
				addImgData:[
				   {img:require("../../../../static/mine/mine1.jpg")},
				   {img:require("../../../../static/mine/mine2.jpg")},
				   {img:require("../../../../static/mine/mine3.png")},
				   {img:require("../../../../static/mine/mine4.jpg")},
				   {img:require("../../../../static/mine/mine5.jpg")},
				   {img:require("../../../../static/mine/mine6.jpg")},
				   {img:require("../../../../static/mine/mine7.jpg")}
				],
				getImgData:[]
			}
		},
		created(){
		   var mineObj = JSON.parse(localStorage.getItem("mineData")) || 0
		   var username = localStorage.getItem("username");
		   if(mineObj){
			   	this.headData = {
		      	    username:username,
					id:mineObj.id,
					signature:mineObj.signature,
					ouFen:mineObj.ouFen,
					telephone:mineObj.telephone,
					address:mineObj.address,
					sex:mineObj.sex,
					headImg:mineObj.headImg
			    }
		   }
			if(this.getImgData.length == 0){
				this.pictureShow = true
			}else{
				this.pictureShow = false
			}
			if(this.headData.username == "未登录"){
				this.isLogin = true;
			}else{
				this.isLogin = false;
			}
		},
		methods:{
			renZheng(){
				this.isShow = true;
				
			},
			changShow(){
				this.isShow = false;
				this.allImg = false;
				this.isErWeiMa = false;
			},
			changeImg(event){
				event.stopPropagation()
				this.allImg = true;
				
			},
			addImgTo(index,event){
				event.stopPropagation();
				var imgObj = {
					img:this.addImgData[index].img
				}
				this.getImgData.push(imgObj);
				this.allImg = false;
				this.pictureShow=false;
			},
			longTouch(index){
				this.deletIndex = index
			},
			delImage(index){
				this.getImgData.splice(index,index+1);
				if(this.getImgData.length == 0){
					this.pictureShow = true
				}else{
					this.pictureShow = false
				}
				this.deletIndex = ''
			},
			erweima(){
				this.isErWeiMa = true;
			}
		}
	}
</script>

<style scoped lang="less">
 @current : 100rem;
 .mineHead{
    height:580/@current;
    width:100%;
    .bgImg{
    	width:100%;
    	height:100%;
    	filter:blur(10/@current);
    	
    }
    .mineHeadTop{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
	    .settingImg{
	    	width:40/@current;
	    	height:40/@current;
	    	position:absolute;
	    	top:60/@current;
	    	right:50/@current;
	    }
	    .headerImg{
	    	position:absolute;
	    	top:108/@current;
	    	left:229/@current;
	    	width:170/@current;
	    	height:170/@current;
	    	border:6/@current solid white;
	    	border-radius: 50%;
	    	img{
	    		width:170/@current;
		    	height:170/@current;
		    	border-radius: 50%;
	    	}
	    }
	    .wangMing{
	    	position:absolute;
	    	top:300/@current;
	    	width:520/@current;
	    	left:50/@current;
	    	text-align:center;
	    	p{
		    	font-size:26/@current;
		    	color:black;
	        }
	        p:nth-of-type(2){
	        	color:rgba(0,0,0,0.8);
	        	margin-top:10/@current;
	        }
	        p:nth-of-type(3){
	        	color:rgba(0,0,0,0.8);
	        	margin-top:15/@current;
	        }
	    }
	    
	    .erWeiMa{
	    	height:100/@current;
	    	width:100%;
	    	position:absolute;
	    	top:480/@current;
	    	left:0;
	    	background:rgba(0,0,0,.5);
	    	div{
	    		float:left;
	    		width:318/@current;
	    		height:100%;
	    		
	    		img{
	    			width:40/@current;
	    			height:40/@current;
	    			margin-left:60/@current;
	    			margin-top:30/@current;
	    			float:left;
	    		}
	    		p{
	    			font-size:30/@current;
	    			margin-left:26/@current;
	    			color:white;
	    			float:left;
	    			height:100/@current;
	    			line-height:100/@current;
	    		}
	    	}
	    	.lineP{
	    		float:left;
	    		height:60/@current;
	    		border-left:4/@current solid rgb(0,0,0);
	    		margin:20/@current 0;
	    	}
	    }
    } 
 }
 .addImg{
    	width:600/@current;
    	overflow: hidden;
    	margin-left:20/@current;
    	border:1/@current solid #d1cbdc;
    	border-radius: 10/@current;
    	margin-top:20/@current;
    	.addNewImg{
    		float:left;
    		.getData{
    			float:left;
    			width:110/@current;
	    		height:110/@current;
	    		margin:15/@current 0 15/@current 10/@current;
	    		position:relative;
	    		img{
    			    width:110/@current;
	    	        height:110/@current;
    		    }
    		    .delImg{
    		    	width:20/@current;
	    	        height:20/@current;
	    	        position:absolute;
	    	        top:10/@current;
	    	        right:10/@current;
    		    }
    		}
    		
    	}
    	.allImgClass{
    		width:600/@current;
    		left:20/@current;
    		/*height:700/@current;*/
    		padding-bottom:30/@current;
    		overflow: hidden;
    		position:fixed;
    		top:160/@current;
    		background:rgba(0,0,0,.3);
    		div{
    			width:160/@current;
	    		height:160/@current;
	    		margin:30/@current 0 0 30/@current;
	    		float:left;
	    		img{
	    			width:160/@current;
		    		height:160/@current;
	    		}
    		}
    		
    	}
    	p{
    		font-size:30/@current;
    		color:#d1cbdc;
    		float:left;
    		margin-top:50/@current;
    		margin-left:10/@current;
    	}
    	.changeImgClass{
    		width:110/@current;
    		height:110/@current;
    		margin:15/@current;
    		float:right;
    	}
    }
    .guanYu{
    	width:640/@current;
    	margin-top:20/@current;
    	border-top:1/@current solid #d1cbdc;
    	border-bottom:1/@current solid #d1cbdc;
    	margin-bottom:98/@current;
    	div{
    		width:590/@current;
    		margin-left:50/@current;
    		height:90/@current;
    	    overflow:hidden;
    		img{
    			float:left;
    		}
    		img:first-of-type{
    			width:40/@current;
    			height:40/@current;
    			margin-top:25/@current;
    		}
    		img:last-of-type{
    			margin-top:30/@current;
    			height:30/@current;
    		}
    		p{
    			float:left;
    			font-size:36/@current;
    			color:#1b1b1b;
    			height:90/@current;
    			line-height:90/@current;
    			margin-left:30/@current;
    			width:470/@current;
    		}
    	}
    	div:first-of-type{
    		border-bottom:1/@current solid #d1cbdc;
    	}
    	div:nth-of-type(2){
    		border-bottom:1/@current solid #d1cbdc;
    	}
    }
    .authentication{
    	background-color:rgba(0,0,0,.2);
    	height:556/@current;
    	width:100%;
    	position:fixed;
    	bottom:0;
    	left:0;
    	z-index:999;
    	div:nth-of-type(1){
    		width:600/@current;
    		margin-left:20/@current;
    		background:white;
    		overflow:hidden;
    		text-align:center;
    		margin-top:235/@current;
    		height:200/@current;
    		border-radius:10/@current;
    		div{
    			margin-left:0;
    			margin-top:24/@current;
    			float:left;
    			width:300/@current;
    			height:172/@current;
    			img{
	    			width:100/@current;
	    			height:100/@current;
	    			
	    		}
	    		p{
	    			font-size:30/@current;
	    			color:#434343;
	    			margin-top:-20/@current;
	    		}
    		}
    	}
    	.deleteClass{
    		width:600/@current;
    		margin-left:20/@current;
    		background:white;
    		text-align:center;
    		margin-top:12/@current;
    		height:88/@current;
    		border-radius:10/@current;
    		p{
    			height:88/@current;
    			line-height:88/@current;
    			font-size:30/@current;
    			color:#A54BE8;
    		}
    	}
    	
    }
    .setErWeiMa{
    	width:640/@current;
    	height:455/@current;
    	background:rgba(0,0,0,.6);
    	position:absolute;
    	z-index:666;
    	top:580/@current;
    	left:0;
    	img{
    		width:260/@current;
    		height:260/@current;
    		margin-left:190/@current;
    		margin-top:60/@current;
    	}
    }
 .isLoginClass{
 	text-decoration: underline;
 	a{
 	   color:#A54BE8;
 	}
 	
 }
</style>